<template>
  <m-page>
    <!-- 借款确认页 -->
    <m-header title="借款确认">
      <div class="borrow_confirm">
        <div class="g-top">
          <div class="g-list1">
            <p>借款人</p>
            <span>张虎</span>
          </div>
          <div class="g-list1">
            <p>身份证号码</p>
            <span>张虎</span>
          </div>
        </div>
        <div class="g-center">
          <div class="g-list1">
            <p>借款额度</p>
            <span>9926323</span>
          </div>
          <div class="g-list1">
            <p>年利率</p>
            <span>4.001%</span>
          </div>
          <div class="g-list1">
            <p>借款期限</p>
            <span>36个月</span>
          </div>
          <div class="g-list1">
            <p>起止时间</p>
            <span>2017/10/10-2020/10/10</span>
          </div>
          <div class="g-list1">
            <p>收款账户</p>
            <span>12435678</span>
          </div>
        </div>
        <div class="g-bottom">
          <div class="g-list1">
            <p>还款方式</p>
            <span>按月付息，到期还本</span>
          </div>
          <div class="g-list1">
            <p>还款日期</p>
            <span>每月21号</span>
          </div>
          <div class="g-list1">
            <p>首次还款</p>
            <span>6294623861391</span>
          </div>
          <div class="g-list1" @click="handleRepayment">
            <p>还款计划</p>
            <span>6294623861391</span>
          </div>
          <div class="g-list1">
            <p>手机号码</p>
            <span>6294623861391</span>
          </div>
        </div>
        <div class="g-radio">
          <input type="radio" />我已阅读并同意
          <span>
            <a href="#">客户告知书、</a>
            <a href="#">“长湘贷”借款借据、</a>
            <a href="#">个人循环贷款申请书</a>
          </span>
        </div>

        <ynet-popup v-model="isPopupShow.bottom" position="bottom">
          <ynet-popup-title-bar :title="this.showPwd == '1'?'请输入验证码':'请输入取款密码'"></ynet-popup-title-bar>
          <div class="md-example-popup md-example-popup-bottom">
            <div class="message_checked" v-if="this.showPwd == '1'">
              <p>
                验证码已发送至您的预留手机号：
                <span>158****1234</span>
              </p>

              <div class="check_input">
                <input type="text" :value="number" class="inputnumber" />
                <span class="check_btn" @click="getIdentifyCode()">获取验证码</span>
              </div>

              <ynet-button type="primary" class="confirm_btn" @click="handConfirm()">确定</ynet-button>

              <ynet-number-keyboard
                type="simple"
                v-model="isKeyBoardShow"
                @enter="onNumberEnter"
                @delete="onNumberDelete"
                @hide="onNumberHide"
              ></ynet-number-keyboard>
            </div>

            <div class="password_checked" v-if="this.showPwd == '2'">
              <div class="password_checked_text">
                <span>长湘贷借款</span>
                <p>￥200，000</p>
              </div>
              <div class="password_checked_content">
                <img src alt />
                <span>收款账户：长行借记卡 （尾号：8737）</span>
              </div>

              <md-codebox :maxlength="6" v-model="password" system />
              <ynet-number-keyboard
                type="simple"
                v-model="isKeyBoardShow"
                @enter="onNumberEnter1"
                @delete="onNumberDelete1"
                @hide="onNumberHide1"
              ></ynet-number-keyboard>
            </div>
          </div>
        </ynet-popup>

        <div class="g-btn">
          <ynet-button type="primary" @onClick="handClick('bottom')">确认借款</ynet-button>
        </div>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import { Toast, Codebox } from "mand-mobile";
import {
  Button,
  Popup,
  Field,
  FieldItem,
  NumberKeyboard,
  PopupTitleBar
} from "ynet-mobile";
export default {
  components: {
    [NumberKeyboard.name]: NumberKeyboard,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Button.name]: Button,
    [PopupTitleBar.name]: PopupTitleBar,
    [Toast.component]: name,
    [Codebox.name]: Codebox
  },
  data() {
    return {
      isPopupShow: {},
      isKeyBoardShow: true,
      number: "", //键盘输入
      showPwd: "1", //1：短信验证  2：取款密码验证
      password: "" //输入密码
    };
  },
  created() {},
  methods: {
    // 跳转到还款计划页
    handleRepayment() {
      // 跳转到还款计划页
      let params = {}
      app.api.pushWindow(
        "long_xiang_loans/loans_repayment_schedule.html",
        params
      )
    },
    // 进入账户选择页面
    showSelector() {
      console.log("111");
    },
    //下一步按钮
    handClick(type) {
      this.$set(this.isPopupShow, type, true);
    },
    // 密码验证成功
    verify() {
      // 跳转到借款结果页
      let params = {}
      app.api.pushWindow(
        "long_xiang_loans/loans_borrow_results.html",
        params
      )
    },
    hidePopUp(type) {
      this.$set(this.isPopupShow, type, false);
    },

    onNumberEnter(val) {
      this.number += val;
    },
    onNumberDelete() {
      if (this.number === "") {
        return;
      }
      this.number = this.number.substr(0, this.number.length - 1);
    },
    onNumberHide() {
      this.number = "";
    },
    onNumberEnter1(val) {
      this.password += val;
    },
    onNumberDelete1() {
      if (this.password === "") {
        return;
      }
      this.password = this.password.substr(0, this.password.length - 1);
    },
    onNumberHide1() {
      this.password = "";
    },
    //点击获取验证码
    getIdentifyCode() {},
    //验证码确认按钮
    handConfirm() {
      if (this.number == "") {
        this.showPwd = "2";
      } else {
        Toast.info("验证码错误！");
      }
    }
  },
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

